<template>
  <div>
    <a-modal
      title="分配角色"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :width="600"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form-model
        ref="ruleForm"
        :model="formData"
        :rules="rules"
        layout="horizontal"
        labelAlign="left"
        :label-col="{ span: 4 }"
        :wrapper-col="{ span: 20 }"
      >
        <a-form-model-item label="角色" prop="role">
          <a-select v-model="formData.role">
            <a-select-option :value="0">角色1</a-select-option>
            <a-select-option :value="1">角色2</a-select-option>
            <a-select-option :value="2">角色3</a-select-option>
          </a-select>
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      formData: {
        role: 0, // 角色
      },
      rules: {
        role: [{ required: true, message: '请选择角色', trigger: 'change' }],
      },
      threeMenuList: []
    }
  },
  methods: {
    edit() {
      this.visible = true
    },
    handleOk() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.confirmLoading = true
          setTimeout(() => {
            this.visible = false
            this.confirmLoading = false
          }, 2000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    handleCancel() {
      this.visible = false
    },
  },
}
</script>
      
      <style lang="scss" scoped>
</style>